<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/shop_head.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			
			body {
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				max-width: 100%;
				min-width: 1000px;
			}
			
			#shop_body {
				max-width: 100%;
				min-width: 1000px;
				text-align: center;
				background-image: url(img/shop/shop_body_list_head.png);
				background-size: contain;
			}
			
			#shop_body>div {
				/*margin: 0px auto;
				width: 1000px;*/
				/*max-width: 100%;
				min-width: 1000px;*/
				width: 94%;
				margin: 0px auto;
			}
			
			#shop_body_list_bigimg {
				max-width: 100%;
				position: relative;
				overflow: hidden;
			}
			
			#shop_body_list_bigimg>ul {
				width: 400%;
				position: relative;
			}
			
			#shop_body_list_bigimg>ul>li {
				width: 25%;
				list-style-type: none;
				float: left;
			}
			
			#shop_body_list_bigimg>ul>li>img {
				cursor: pointer;
				display: block;
				width: 100%;
			}
			
			#shop_body_list_bigimg>span {
				cursor: pointer;
				position: relative;
				float: left;
				margin-left: 3px;
				top: -50px;
				left: 50px;
				display: block;
				width: 20px;
				height: 20px;
				/*border: 1px solid white;*/
				border-radius: 10px;
				background-color: #000000;
				filter: alpha(opacity=80);
				-moz-opacity: 0.8;
				opacity: 0.8;
			}
			
			#shop_body_list_head {
				background-image: url(img/shop/shop_body_list_head.png);
			}
			
			#shop_body_list_head>img {
				display: block;
				margin: 0px auto;
			}
			
			#shop_body_list {
				margin: 0px auto;
				max-width: 100%;
				min-width: 1000px;
			}
			
			.shop_body_list_div {
				display: block;
				overflow: hidden;
				width: 100%;
			}
			
			.shop_body_list_div>div {
				width: 33.3333%;
				float: left;
				overflow: hidden;
			}
			
			.shop_body_change {
				position: relative;
				overflow: hidden;
			}
			
			.shop_body_list_div>div>.shop_body_change>img {
				display: block;
				width: 100%;
			}
			
			.shop_list_black {
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0px;
				left: 0px;
				background-color: #000000;
				filter: alpha(opacity=0);
				-moz-opacity: 0;
				opacity: 0;
			}
			
			.shop_list_font {
				display: block;
				position: absolute;
				top: 0px;
				left: 0px;
				bottom: 0px;
				right: 0px;
				margin: auto;
				width: 18%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: white;
				font-family: "仿宋";
				font-weight: bold;
				font-size: 10px;
				border: 1px solid white;
				filter: alpha(opacity=0);
				-moz-opacity: 0;
				opacity: 0;
			}
			
			.shop_list_font:hover {
				cursor: pointer;
				background-color: white;
				color: black;
			}
			
			#shop_foot {
				max-width: 100%;
				min-width: 1000px;
				text-align: center;
			}
			
			#shop_foot>img {
				display: block;
				width: 100%;
			}
		</style>
	</head>

	<body>
		<div id="shop_head">
			<div id="base_top_bg">
				<div class="base_top_navDiv">
					<div class="base_top_logo" onclick="location.href='index.html'"></div>

					<ul class="base_top_nav">
						<li class="w42" id="index_dl">登录</li>
						<li class="w40" id="index_tcdl" onclick="location.href='register.html'"></li>
						<li class="w40" onclick="location.href='shop.html'"></li>
						<li class="w56" id="base_gwc">购物车</li>
						<li></li>
						<li class="w40"></li>
						<li class="w40"></li>
						<li class="w40"></li>
					</ul>
					<div id="base_dlcg"></div>

					<img class="base_weixin" src="img/index/index_weixin1.png" />
					<img class="base_weibo" src="img/index/index_weibo1.png" />
					<img class="base_weitao" src="img/index/index_weitao1.png" />
				</div>
			</div>
			<ul id="base_leftAdd_content">
				<li>
					<a href="news.html">资讯</a>
				</li>
				<li>
					<a href="join.html">加盟</a>
				</li>
				<li>
					<a href="job.html">纳贤</a>
				</li>
				<li>
					<a href="woker.html">匠人</a>
				</li>
				<li>
					<a href="cooperation.html">合作</a>
				</li>
				<li>
					<a href="actor.html">选角</a>
				</li>
				<li>
					<a href="media.html">媒体</a>
				</li>
			</ul>
			<div id="base_leftAdd">
				<span></span>
			</div>
			<!--模拟客服开始-->
			<div id="top"></div>
			<div id="main">
				<span id="base_guanbi"></span>
				<div id="txt">花笙记客服代表</div>
				<div id="show">
					<span class="show_span">很高兴为您服务！</span>
				</div>
				<input type="text" name="text" id="text" value="" />
				<input type="button" style="cursor: pointer;" id="send" value="发送" />
			</div>
			<!--模拟客服结束-->
		</div>
		<div id="shop_nav">
			<div id="shop_nav_icon">
				<ul id="img_icon">
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
				</ul>
				<ul id="font_icon">
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list2">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list2">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<div id="shop_body">
			<div>
				<div id="shop_body_list_bigimg">
					<ul>
						<li><img src="img/shop/shop_lunbo1.png" /></li>
						<li><img src="img/shop/shop_lunbo2.png" /></li>
						<li><img src="img/shop/shop_lunbo3.png" /></li>
						<li><img src="img/shop/shop_lunbo4.png" /></li>
					</ul>
					<span style="background-color: white;"></span><span></span><span></span><span></span>
				</div>
				<div id="shop_body_list_head">
					<img src="img/shop/shop_body_list_headimg.png" />
				</div>
				<div id="shop_body_list">
					<div class="shop_body_list_div">
						<div>
							<div class="shop_body_change">
								<img src="img/shop/shop_list_img1.jpg" />
								<div class="shop_list_black"></div>
								<div class="shop_list_font">点击查看</div>
							</div>

						</div>
						<div>
							<div class="shop_body_change">
								<img src="img/shop/shop_list_img2.jpg" />
								<div class="shop_list_black"></div>
								<div class="shop_list_font">点击查看</div>
							</div>
						</div>
						<div>
							<div class="shop_body_change">
								<img src="img/shop/shop_list_img3.jpg" />
								<div class="shop_list_black"></div>
								<div class="shop_list_font">点击查看</div>
							</div>
						</div>
					</div>
					<div class="shop_body_list_div">
						<div>
							<div class="shop_body_change">
								<img src="img/shop/shop_list_img4.jpg" />
								<div class="shop_list_black"></div>
								<div class="shop_list_font">点击查看</div>
							</div>
						</div>
						<div>
							<div class="shop_body_change">
								<img src="img/shop/shop_list_img5.jpg" />
								<div class="shop_list_black"></div>
								<div class="shop_list_font">点击查看</div>
							</div>
						</div>
						<div>
							<div class="shop_body_change">
								<img src="img/shop/shop_list_img6.jpg" />
								<div class="shop_list_black"></div>
								<div class="shop_list_font">点击查看</div>
							</div>
						</div>
					</div>
					<div class="shop_body_list_div">
						<div>
							<div class="shop_body_change">
								<img src="img/shop/shop_list_img7.jpg" />
								<div class="shop_list_black"></div>
								<div class="shop_list_font">点击查看</div>
							</div>
						</div>
						<div>
							<div class="shop_body_change">
								<img src="img/shop/shop_list_img8.jpg" />
								<div class="shop_list_black"></div>
								<div class="shop_list_font">点击查看</div>
							</div>
						</div>
						<div>
							<div class="shop_body_change">
								<img src="img/shop/shop_list_img9.jpg" />
								<div class="shop_list_black"></div>
								<div class="shop_list_font">点击查看</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="shop_foot">
			<img src="//gdp.alicdn.com/imgextra/i1/608273487/TB2P_t7bFXXXXX4XpXXXXXXXXXX_!!608273487.jpg" />
		</div>
	</body>
	<script src="js/jquery1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/shop_head.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//无缝轮播
		var liw = parseInt($("#shop_body_list_bigimg>ul>li").css("width"));
		var spanindex = 1;
		$(window).resize(function() {
			liw = parseInt($("#shop_body_list_bigimg>ul>li").css("width"));
		});
		var lunboset;
		var lunbo = function() {
			lunboset = setInterval(function() {
				$("#shop_body_list_bigimg>ul").animate({
					left: -liw + "px"
				}, 1000, function() {
					$("#shop_body_list_bigimg>ul").css("left", "0px");
					$("#shop_body_list_bigimg>ul>li:eq(0)").appendTo("#shop_body_list_bigimg>ul");
				});
				$("#shop_body_list_bigimg>span").each(function() {
					$(this).css("background-color", "#000000");
				});
				$("#shop_body_list_bigimg>span:eq(" + spanindex + ")").css("background-color", "#FFFFFF");
				spanindex++;
				if(spanindex > 3) {
					spanindex = 0;
				}
			}, 4000)
		}
		lunbo();
		$("#shop_body_list_bigimg>ul").mouseover(function() {
			clearInterval(lunboset);
		}).mouseout(function() {
			lunbo();
		})
		//span点击
		var gundongimg0 = $("#shop_body_list_bigimg>ul>li:eq(0)");
		var gundongimg1 = $("#shop_body_list_bigimg>ul>li:eq(1)");
		var gundongimg2 = $("#shop_body_list_bigimg>ul>li:eq(2)");
		var gundongimg3 = $("#shop_body_list_bigimg>ul>li:eq(3)");
		$("#shop_body_list_bigimg>span").each(function(i) {
			$(this).click(function() {
				var spanxb = $(this).index() - 1;
				for(var i = 0; i < 4; i++) {
					eval("gundongimg" + spanxb).appendTo("#shop_body_list_bigimg>ul");
					spanxb++;
					if(spanxb == 4) {
						spanxb = 0;
					}
				}
				spanindex = $(this).index() == 4 ? 0 : $(this).index();
				$("#shop_body_list_bigimg>span").each(function() {
					$(this).css("background-color", "#000000");
				});
				$(this).css("background-color", "#FFFFFF");
			})
		})

		//
		$(".shop_body_change").each(function(i) {
			$(this).mouseover(function() {
				$(this).css("transform", "scale(1.5)");
				$(this).css("-webkit-transform", "scale(1.5)");
				$(this).css("-moz-transform", "scale(1.5)");
				$(this).css("-ms-transform", "scale(1.5)");
				$(this).css("transition", "transform 0.5s ease-in-out");
				$(this).css("-webkit-transition", "transform 0.5s ease-in-out");
				$(this).css("-moz-transition", "transform 0.5s ease-in-out");
				$(this).css("-ms-transition", "transform 0.5s ease-in-out");
				$(".shop_list_font:eq(" + i + ")").stop(true).animate({
					opacity: "1"
				}, 500);
				$(".shop_list_black:eq(" + i + ")").stop(true).animate({
					opacity: "0.7"
				}, 500);
			}).mouseout(function() {
				$(this).css("transform", "scale(1)");
				$(this).css("-webkit-transform", "scale(1)");
				$(this).css("-moz-transform", "scale(1)");
				$(this).css("-ms-transform", "scale(1)");
				$(this).css("transition", "transform 0.5s ease-in-out");
				$(this).css("-webkit-transition", "transform 0.5s ease-in-out");
				$(this).css("-moz-transition", "transform 0.5s ease-in-out");
				$(this).css("-ms-transition", "transform 0.5s ease-in-out");
				$(".shop_list_font:eq(" + i + ")").stop(true).animate({
					opacity: "0"
				}, 500);
				$(".shop_list_black:eq(" + i + ")").stop(true).animate({
					opacity: "0"
				}, 500);
			})
		})
		//
		$("#shop_body_list_bigimg>ul>li").each(function() {
			$(this).click(function() {
				location.href = "product.html";
			})
		})
		$("#shop_body_list_bigimg>ul>li").eq(0).click(function() {
			location.href = "product.html?id=58cf59112f301e007e52ddc2";
		})
		$("#shop_body_list_bigimg>ul>li").eq(1).click(function() {
			location.href = "product.html?id=58cfd3652f301e007e56746b";
		})
		$("#shop_body_list_bigimg>ul>li").eq(2).click(function() {
			location.href = "product.html?id=58cfd71d61ff4b0060366538";
		})
		$("#shop_body_list_bigimg>ul>li").eq(3).click(function() {
			location.href = "product.html?id=58cf6c0e44d904006844ac36";
		})
		$(".shop_list_font").eq(0).click(function() {
			location.href = "product.html?id=58cfdf1cb123db3f6b4818c6";
		})
		$(".shop_list_font").eq(1).click(function() {
			location.href = "product.html?id=58cfde2b2f301e007e56caea";
		})
		$(".shop_list_font").eq(2).click(function() {
			location.href = "product.html?id=58cfdf1cb123db3f6b4818c6";
		})
		$(".shop_list_font").eq(3).click(function() {
			location.href = "product.html?id=58cfdf1cb123db3f6b4818c6";
		})
		$(".shop_list_font").eq(4).click(function() {
			location.href = "product.html?id=58cfda35ac502e0058a62bb3";
		})
		$(".shop_list_font").eq(5).click(function() {
			location.href = "product.html?id=58cfde2b2f301e007e56caea";
		})
		$(".shop_list_font").eq(6).click(function() {
			location.href = "product.html?id=58cfdf1cb123db3f6b4818c6";
		})
		$(".shop_list_font").eq(7).click(function() {
			location.href = "product.html?id=58cf6c0e44d904006844ac36";
		})
		$(".shop_list_font").eq(8).click(function() {
			location.href = "product.html?id=58cf6cbf570c350058ab85e7";
		})
	</script>

</html>